﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<ToppingControl.Models.TopCordPlanModel.TopCordPlan_DS>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  
    <div style="margin-bottom:20px;">
      <h2 style="color: #191970">TOPPED CORD PLAN</h2>
   </div>
    <div class="cap shadow txt13bold">
         TOPPING NO :
      </div>
      <div id="code" class="desc txt13bold" style="width: 200px;">1</div>
      <div class="cap shadow txt13bold">PLAN DATE :</div>
 <div id="dtP" class="desc txt13bold" style="width: 200px;"><%:ViewBag.Message%></div>
<div style="clear:left">
  <div class="cap shadow txt13bold" >
         Import date :
     </div> 
      <div id="txtImp" class="desc txt13bold" style="width: 200px;">
          <input type="text" id="dFrom" value=""  />
         
      </div><button  id="search"></button>
      </div>
 <div style="clear:left">
   <ul id="menu1" class="menu1" style="vertical-align:bottom;">
      <li>
         <%: Html.ActionLink("Back", "Index",new { dtPlan = ViewBag.Message})%></li>
      <li class="above"><a href="#">Insert line above</a></li>
      <li class="under"><a href="#">Insert line under</a></li>
      <li id="save"><a href="#">Save</a></li>
   </ul>
<select id="combobox" class="hide" style="width:200px;" >
<option value=""></option>
</select>


   <table width="100%" id="dg">
   <thead>
         <tr class="head"  id="trRow">
            <td class="cell " style="width: 50px;">STATUS</td>
            <td class="cell" style="width: 120px;">SEQ</td>
            <td class="cell txt" style="width: 250px;">TOPPED CORD</td>
            <td class="cell cus" style="width: 150px;">MANUF.</td>
            <td class="cell txt" style="width: 75px;">LENGTH.(M.)</td>  
            <td class="cell" style="text-align:center; width:50px;" >DELETE</td>
         </tr>
         
      </thead>
      
       <tbody>
         <%
            int i = 0;
            
            foreach (var item in Model)
            {
               i = i + 1;
               string trrow = "rowa";
               if (i % 2 == 0) trrow = "rowb";
               string seq = item._Plandt +'-'+item._Itemno;
               
               if (item._Plants == "U")
               {   
         %>
         
         <tr class="rowa"  style="line-height:25px;">
          
            <td class="cell" style="width: 50px; text-align:center;">
               <%=item._Plants%>
            </td>
            <td style="width: 120px; text-align:center;" class="cell">
               <%= seq%>
            </td>
            <td style="width: 250px; text-align:center;" class="cell txt">
               <input type="text" value="<%= item._Topcrdcd%>"  style="width:97%;" maxlength="30" />
            </td>
            <td style="width: 150px;" class="cell cus">
               <%=item._Manufc%>
            </td>
            <td style="width: 75px; text-align:center;" class="cell txt">
              <input type="text" value="<%= item._Length %>" style="width:97%;" maxlength="6" class="right"/>
            </td>                       
           
            <td style="width: 50px; text-align:center;" class="cell">
            
             <img src="<%: Url.Content("~/Images/action_delete.png") %>" class="del" alt='' />            
              
            </td>
         </tr>
         <% } else { %>
         <tr class= class="rowb"   style="line-height:25px;">
          
            <td  style="width: 50px; text-align:center;">
               <%:  item._Plants%>
            </td>
            <td style="width: 120px; text-align:center;">
               <%= seq%>
            </td>
            <td style="width: 250px; text-align:center;">
               <%:  item._Topcrdcd%>
            </td>
            <td style="width: 150px;">
               <%:  item._Manufc%>
            </td>
            <td style="width: 50px; text-align:center;">
               <%:  item._Length%>
            </td>                       
           
            <td style="width: 50px; text-align:center;">
            
                
              
            </td>
         </tr>
         <% }
            } %>
      </tbody>
   </table>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="TableContent" runat="server">

   <div style="clear:both;">
   <table class="shadow" id="UseTbl" style="text-align:left; margin-left:0px;">
  
   <thead>
         <tr class="cell" style="background-color:#ccc; color:#000; font-weight:bold;text-align:center;"><td colspan="4">USED PLAN</td></tr>
         <tr class="head"  id="trUse" style="background-color:#008080; color:White;">
            <td class="cell" style="width: 120px;">
               SEQ
            </td>
            <td class="cell" style="width: 250px;">
               TOPPED CORD
            </td>      
             <td class="cell cus" style="width: 150px;">MANUF.</td>
            <td class="cell txt" style="width: 75px;">LENGTH.(M.)</td>  
         </tr>         
   </thead>
   <tbody></tbody>
   </table>
   <input type="text" id="txtcomp" class="hide" maxlength="30" style="width:97%" />
</div>
</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="ScriptsSection" runat="server">
   <style type="text/css">
   .right
   {
      text-align:right!important;
   }
    .skip
    {
        color:Red !important;
    }
     .samp
    {
        color:#FF6D00 !important;
    }
    .hide
    {
    display:none;
    }
    .actived
    {
    background-color:#20B2AA!important;
    color:White;         
    }   
    .skip
    {
        color:Red !important;
    }
      .samp
    {
        color:#FF6D00 !important;
    }
   </style>
    <% if (false) { %>
   <script src="../../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
   <% } %>
   <script type="text/javascript">
      $(function () {
         var List;
         $.post('<%=Url.Action("Get_TOPCRDCD","CPD_USE") %>', function (data) {
            //$('.Cpd').autocomplete({ source: data });
            List = data;
         });

         $('#dFrom').dateEntry({ useMouseWheel: false, dateFormat: 'dmy/' })
         $("#search").button({
            icons: { primary: 'ui-icon-arrowthickstop-1-s' }, text: false
         }).click(function () {
            var dFrom = $("#dFrom").val();

            $.post('<%=Url.Action("Import")%>', { dtPlan: dFrom }, function (data) {

               WAITINGDLG_show(imgWait);

               for (i = 0; i < data.length; i++) {
                  var tr = $("#dg tr.head").clone(true).removeClass("head").addClass("rowa").removeAttr("id");
                  tr.find(".cell").each(function () {

                     if ($(this).hasClass("txt")) {

                        if ($(this).text() == 'TOPPED CORD') {
                           var txtC = $("#txtcomp").clone(true).removeAttr("id").removeClass("hide");
                           txtC.autocomplete({ source: List });
                           txtC.val(data[i]._Topcrdcd);
                           $(this).html(txtC);
                        }
                        if ($(this).text() == 'LENGTH.(M.)') {
                           $(this).html(txt.format(data[i]._Length, 8, 97));
                           $(this).find("input:text").setMask("9999.999").addClass("right");
                        }
                     }
                     else if ($(this).hasClass("cus")) {
                        var cb = $("#combobox").clone(true).removeAttr("id").removeClass("hide");
                        GetCS(cb);
                        cb.val(data[i]._Manufc);
                        $(this).html(cb);
                     } else $(this).text("");

                  });
                  var p = '<%: Url.Content("~/Images/action_delete.png") %>'
                  tr.find("td:last").html("<img class='del' src='" + p + "' />");
                  //
                  tr.appendTo($("#dg tr.rowa:last").parent());
               }
               WAITINGDLG_hide();
            });

         }); //click
         /**GET USE**/
         $.post('<%=Url.Action("Get_USE_ACTIVE","ToppedCordPlan") %>', function (data) {

            WAITINGDLG_show(imgWait);
            $("#UseTbl tbody").empty();

            for (i = 0; i < data.length; i++) {
               var seq = data[i]._Plandt + '-' + data[i]._Itemno;
               var row = "rowa";
               if (i % 2 == 0) {
                  row = "rowa";
               }
               var $tr = $("#trUse").clone().addClass(row).removeAttr("style");
               $("td:eq(0)", $tr).text(seq).addClass("text-center");
               $("td:eq(1)", $tr).text(data[i]._Topcrdcd).addClass("text-center");
               $("td:eq(2)", $tr).text(data[i]._Manufc).addClass("text-center");
               $("td:eq(3)", $tr).text(data[i]._Length).addClass("text-center");
               if (data[i]._Skpflag != "") {
                   $tr.addClass("skip");
               }
               if (data[i]._Sample != "") {
                   $tr.addClass("samp");
               }

               $tr.appendTo($("#UseTbl tbody"));
            }
            WAITINGDLG_hide();
         });

         /******* CREATE ROW **********/
         function CreatTR() {
            var tr = $("#dg tr.head").clone(true).removeClass("head").addClass("rowa").removeAttr("id");
            tr.find(".cell").each(function () {

               if ($(this).hasClass("txt")) {

                  if ($(this).text() == 'TOPPED CORD') {
                     var txtC = $("#txtcomp").clone(true).removeAttr("id").removeClass("hide");
                     txtC.autocomplete({ source: List });                     
                     $(this).html(txtC);
                     //  $(this).html(txt.format('', 30, 97));
                  }
                  if ($(this).text() == 'LENGTH.(M.)') {
                     $(this).html(txt.format('', 8, 97));
                     $(this).find("input:text").setMask("9999.999").addClass("right");
                  }
               }
               else if ($(this).hasClass("cus")) {
                  var cb = $("#combobox").clone(true).removeAttr("id").removeClass("hide");
                  GetCS(cb);
                  $(this).html(cb);
               } else $(this).text("");

            });
            var p = '<%: Url.Content("~/Images/action_delete.png") %>'
            tr.find("td:last").html("<img class='del' src='" + p + "' />");
            return tr;
         }
         /***GET_CUSTOMER****/
         var cus;
         $.post('<%=Url.Action("GetCUSTOMER","ToppedCordPlan") %>', function (data) {
            var mySelect = $('#combobox');
            cus = data;
         });

         function GetCS(combo, sel) {
            if (cus == null) return;
            $.each(cus, function (val, text) {
               text = $.trim(text);
               combo.append($('<option></option>').val(text).html(text));
            });
         }

         /******* STRING FORMAT **********/
         txt = "<input type='text' value='{0}' maxlength='{1}' style=\"width: {2}%; text-align:center; \"/>";
         String.prototype.format = function () {
            var args = arguments;
            return this.replace(/\{(\d+)\}/g, function (m, n) { return args[n]; });
         };
         /******* INSERT ROW **********/
         $(".under,.above").live("click", function (event) {
            var $tr = $("tr.actived:first");
            var tr = CreatTR();

            if ($tr.length > 0) {
               if ($(this).hasClass("above")) {
                  $tr.before(tr);
               } else if ($(this).hasClass("under")) {
                  $tr.after(tr);
               }
            }
            else {
               tr.appendTo($("#dg tr.rowa:last").parent());
            }
            //            $tr.removeClass("actived");
            //            tr.addClass("actived");
            //            tr.find("input:text:first").focus();
         });
         /************ DEL ROW ******************/
         $(".del").live("click", function () {
            $(this).closest("tr").remove();
            if ($("#dg tr.rowa").length <= 1) {
               var tr = CreatTR();
               tr.appendTo($("#dg tr:last"));
               return
            }


         });

         /******* SET INITAIL **********/
         setTimeout(function () {

            if ($("#dg tr.rowa:first").length <= 0) {
               $("#dg").append(CreatTR());
            } else {
               $("#dg tr.rowa").each(function () {
                  $(this).find("input:text:eq(1)").setMask("9999.999");
                  $dCbo = $(this).find(".cus");
                  var cb = $("#combobox").clone(true).removeAttr("id").removeClass("hide");
                  GetCS(cb, $dCbo.text());
                  cb.val($.trim($dCbo.text()));
                  $dCbo.html(cb);
               });
            }

            $("#dg tr.rowa,#dg tr.rowb ").live("click", function () {

               $("tr.rowa, tr.rowb").removeClass("actived");
               var $tr = $(this);
               $tr.addClass("actived");

            });
         }, 500)

         /******* SAVE DATA **********/

         $("#save").click(function () {

            var dataForSubmit = new Array();
            var bln = true;
            var blnTxt = null;
            var $in;
            $("#dg tr.rowa").each(function () {
               if (bln == false) return;
               var $tr = $(this);
               var code = $tr.find("input:eq(0)").val();
               var manu = $tr.find("select:eq(0)").val();
               var lens = $tr.find("input:eq(1)").val()

               if ((code != "") || (manu != "") || (lens != "")) {
                  //GET===>SaveData 

                  if ($tr.parent().find("td.cell:first").html() != "L") {

                     if (code == "") {
                        alert("ระบูค่าไม่ครบ");
                        $tr.find("input:eq(0)").focus();
                        bln = false;
                        return;
                     } else if (manu == "") {
                        alert("ระบุค่าไม่ครบ");
                        $tr.find("select:eq(0)").focus();
                        bln = false;
                        return;
                     } else if (lens == "") {
                        alert("ระบุค่าไม่ครบ");
                        $tr.find("input:eq(1)").focus();
                        bln = false;
                        return;
                     }

                     dataForSubmit.push({
                        _Topno: 1,
                        _Plandt: '<%:ViewBag.Message%>',
                        _Itemno: $tr.parent().find("td.cell:eq(1)").html(),
                        _Topcrdcd: code,
                        _Manufc: manu,
                        _Length: lens
                     });
                  }
               }


            });
            //Add_Edit_UNLock

            var getUsersUrl = '<%= Url.Action("Add_Edit_UNLock", "ToppedCordPlan") %>';

            if (bln) callScriptMethod(getUsersUrl, { theData: dataForSubmit, dtPlan: $("#dtP").text() }, 'ADD');
         }); //save




         /********* AJAX ********/

         function callScriptMethod(url, jsonObject, action, callback, async) {

            callback = callback || function () { };
            async = (async == null || async);

            $.ajax({
               type: "POST",
               contentType: "application/json; charset=utf-8",
               url: url,
               data: JSON.stringify(jsonObject),
               dataType: "json",
               async: async,
               success: function (data) {

                  switch (action) {

                     case 'ADD':
                        alert(data.message);
                        if (data.success != "0") {
                           $("#sid").val(data.success);
                           window.location = '<%: Url.Action("unLockTopping") %>' + '?dtPlan=' + $("#dtP").text();

                        }
                        break;
                     case 'GET':
                        break;
                  }
               },
               error: function (xhr, status, error) {
                  var err = xhr.responseText;
                  alert(err.Message);
               }
            });
         }
      });
   </script>
   

</asp:Content>
